@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "SF Pro Text", "Segoe UI", "Roboto", Arial, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    /* 科技蓝白风格的颜色系统 */
    --background: 210 20% 98%; /* #F9FAFB */
    --foreground: 215 25% 27%; /* #374151 - 主要文本 */
    
    --card: 0 0% 100%; /* #FFFFFF - 卡片背景 */
    --card-foreground: 215 25% 27%; /* #374151 - 卡片文本 */
    
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 27%;
    
    --primary: 213 100% 42%; /* #0062D6 - 主蓝色 */
    --primary-foreground: 0 0% 100%; /* 白色文本 */
    
    --secondary: 214 32% 91%; /* #E5F0FF - 浅蓝色 */
    --secondary-foreground: 215 25% 27%;
    
    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%; /* #6B7280 - 次要文本 */
    
    --accent: 214 32% 91%; /* #E5F0FF - 浅蓝色 */
    --accent-foreground: 215 25% 27%;
    
    --destructive: 0 84% 60%; /* #EF4444 - 错误红 */
    --destructive-foreground: 0 0% 98%;
    
    --success: 158 64% 40%; /* #10B981 - 成功绿 */
    --warning: 35 92% 50%; /* #F59E0B - 警告黄 */
    
    --border: 220 13% 91%; /* #E5E7EB - 边框色 */
    --input: 220 13% 91%;
    --ring: 213 100% 42%; /* #0062D6 - 主蓝色 */
    
    /* 图表颜色 */
    --chart-1: 213 100% 42%; /* 主蓝 */
    --chart-2: 158 64% 40%; /* 绿色 */
    --chart-3: 262 83% 58%; /* 紫色 */
    --chart-4: 35 92% 50%; /* 黄色 */
    --chart-5: 0 84% 60%; /* 红色 */
    
    /* 导航栏 */
    --navbar-bg: 222 47% 18%; /* #1E293B - 深色背景 */
    
    /* 圆角 */
    --radius: 0.5rem;
    
    /* 阴影 */
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    
    /* 侧边栏 */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 215 16% 47%;
    --sidebar-primary: 213 100% 42%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 214 32% 91%;
    --sidebar-accent-foreground: 215 25% 27%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 213 100% 42%;
  }
  
  .dark {
    --background: 222 47% 11%;
    --foreground: 0 0% 98%;
    
    --card: 222 47% 11%;
    --card-foreground: 0 0% 98%;
    
    --popover: 222 47% 11%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 213 100% 42%;
    --primary-foreground: 0 0% 98%;
    
    --secondary: 217 33% 17%;
    --secondary-foreground: 0 0% 98%;
    
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    
    --accent: 217 33% 17%;
    --accent-foreground: 0 0% 98%;
    
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    
    --success: 158 64% 40%;
    --warning: 35 92% 50%;
    
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 213 100% 42%;
    
    /* 导航栏 */
    --navbar-bg: 222 47% 18%;
    
    /* 侧边栏 */
    --sidebar-background: 222 47% 11%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 213 100% 42%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 217 33% 17%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 217 33% 17%;
    --sidebar-ring: 213 100% 42%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  
  /* 标题样式 */
  h1 {
    @apply text-2xl font-bold tracking-tight;
  }
  h2 {
    @apply text-xl font-bold tracking-tight;
  }
  h3 {
    @apply text-lg font-bold;
  }
  
  /* 卡片阴影 */
  .card-shadow {
    box-shadow: var(--shadow-card);
  }
  
  .card-shadow:hover {
    box-shadow: var(--shadow-card-hover);
  }
}

/* 自定义组件样式 */
@layer components {
  /* 导航栏 */
  .navbar {
    @apply bg-[#1E293B] text-white py-4 px-6;
  }
  
  /* 状态标签 */
  .status-normal {
    @apply bg-success/20 text-success px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-warning {
    @apply bg-warning/20 text-warning px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-error {
    @apply bg-destructive/20 text-destructive px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-info {
    @apply bg-primary/20 text-primary px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-primary {
    @apply bg-primary/20 text-primary px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-default {
    @apply bg-muted text-muted-foreground px-2 py-1 rounded-full text-xs font-medium;
  }
  
  /* 数据卡片 */
  .stat-card {
    @apply bg-white rounded-lg p-6 card-shadow border border-border;
  }
  
  /* 表格样式 */
  .table-header {
    @apply bg-secondary text-foreground font-medium;
  }
  
  .table-row-alt {
    @apply bg-muted/30;
  }
  
  .table-row {
    @apply hover:bg-muted/50 transition-colors;
  }
}
